LETUS online editor形式に変換してcopyするPopupMenu

2023-06-21

テーブルの変換コードだけここに置いておこう

code:table.ts

const convertTable = (table: TableBlock): string => {

(cell) => cell.map(

(row) => row.map((node) => convertNode(node)).join("")

)

);

return `<table>

<caption>${table.fileName}</caption>

<thead>

<tr>

<tr>

</thead>

<tbody>

${lines?.map?.(

)?.join?.("\n")

}

</tbody>

</table>`;

};

2023-06-07

17:47:02 raw URLを変換できるようにした

2023-02-06

21:47:55 iconをfont awesomeにした

2021-05-12

22:49:48 画像の幅を調節した

2020-11-21 16:15:41

打ち消し線が反映されないバグを直した

2020-11-12 01:28:50

h4

h5

h6

2020-10-28 14:11:06

数式をインラインにした

2020-10-21 10:50:13

見出しを追加した

h1

h2

h3

2020-10-19 21:12:50

番号なしindentを実装した

行間を確保した

実装

簡略化のため、一段下げたら<li>になるようにした

問題とか

どうしようもないな

code blockに対応させたい

code:script.js

import {ScrapboxParser} from '/api/code/takker/scrapbox-parser.min.js/parser.js';

// markdown変換

scrapbox.PopupMenu.addButton({

title: "\uf13b",

onClick: text => {

const blocks = ScrapboxParser.parse(text, {hasTitle: false});

console.log('Parserd text:');

console.log(blocks);

if(navigator.clipboard){

const copiedText = convertSb2HTML(blocks).join('\n');

console.log(copiedText);

navigator.clipboard.writeText(copiedText).catch((e) => console.log(e));

console.log('Copied.');

}

return;

}

});

function convertSb2HTML(blocks) {

// このindent levelを基準にする

const topIndentLevel = Math.min(...blocks.map(block => block.indent));

let indentLevel = topIndentLevel;

for (const block of blocks.filter(block => block.type === 'line')) {

// 前loopからのindent levelの増減

const diff = block.indent - indentLevel;

// indent levelが減ったら</ul>を追加する

// indent levelが増えたら<ul>を追加する

const content = block.nodes.map(node => convertNode(node)).join('');

if (block.indent > topIndentLevel) {

} else {

}

indentLevel = block.indent;

}

// </ul>の不足分を補う

result.push('</p>');

return result;

}

HTML要素を含んだ文字列を返す

code:script.js

function convertNode(node) {

switch (node.type) {

case 'quote':

// scrapboxのcssからパクった

return `<span style="

font-style: italic;

background-color: rgba(128,128,128,0.1);

display: block;

padding-left: 4px;">${node.nodes.map(node => convertNode(node)).join('')}</span>`;

case 'image':

case 'strongImage':

case 'icon':

let src = '';

let href = '';

let alt = '';

switch(node.pathType) {

case 'root':

break;

case 'relative':

alt = node.path;

break;

}

return `<a target="_blank" href="${href}"><img style="

height: 1.3em;

vertical-align: top;" src="${src}" alt="${alt}" /></a>`;

case 'strongIcon':

return ''; //無視

case 'formula':

case 'helpfeel':

return '';

case 'decoration':

let result = node.nodes.map(node => convertNode(node)).join('');

return result;

case 'strong':

case 'code':

case 'commandLine':

case 'googleMap':

return ''; // 今回は無視

case 'blank':

case 'link':

switch(node.pathType) {

case 'root':

case 'relative':

case 'absolute':

}

case 'hashTag':

case 'plain':

}

}